<template>
  <div class="fron">
    <loading :state="state"></loading>
    <banner :banner="banner"></banner>
    <div class="new-m">
      <div class="new-t">
        <div class="item-l" v-for="(item,index) in dataTop" :key="index" @click="toDetail(item.id,'normal')">
          <p class="p1">{{item.des}}</p>
          <div class="p1">低调奢华有内涵</div>
          <img :src="item.pic" alt="">
          <p class="p2">{{item.name}}</p>
          <div class="btn">
            ￥{{item.price}}
            <span>立即购买</span>
          </div>
        </div>
        <div class="item-r">
          <div class="item-rr" v-for="(item,index) in dataTopR" :key="index" @click="toDetail(item.id,'normal')">
            <div class="le">
              <p class="p1">{{item.des}}</p>
              <p class="p1">固执的内敛美感</p>
              <p class="p2 ste">{{item.name}}</p>
              <p class="p2">时尚休闲石英表</p>
              <div class="btn">
                ￥{{item.price}} / 立即购买
              </div>
            </div>
            <img :src="item.pic" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="man">
      <div v-for="(item,index) in dataGood" :key="index">
        <tab-bar :text="item.name" plan="品质好货不用挑，经得起时间检验"></tab-bar>
        <div class="list">
          <div class="list-it" v-for="(val,index2) in item.good" :key="index2" @click="toDetail(val[0].id,'normal')">
            <img :src="val[0].pic" alt="">
            <div class="list-tt">
              <img class="line-1" src="../../assets/img/item2-li.jpg" alt="">
              <p class="p2">{{val[0].name}}</p>
              <img class="line-1" src="../../assets/img/item2-li.jpg" alt="">
            </div>
            <div class="item-tt">
              <div class="tt-l">
                <p class="p4">薪年价:</p>
                <p class="p5" style="font-weight: bold">满减后</p>
              </div>
              <p class="p6" style="font-weight: bold">{{val[0].price}}</p>
              <div class="tt-r">
                <div class="tt-rt">立即抢购</div>
                <p class="p4" style="text-decoration:line-through">原价:{{val[0].line}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="nav" @click="scrollTop" style="padding-bottom: 6vw">
        <img src="../../assets/img/1.png" alt="">
        <p class="p7">返回顶部</p>
        <img src="../../assets/img/1.png" alt="">
      </div>
      <!--<van-list-->
      <!--v-model="loading"-->
      <!--:finished="finished"-->
      <!--@load="onLoad"-->
      <!--&gt;-->
      <!--<van-cell-->
      <!--v-for="(good, key) in goodsAll"-->
      <!--:key="key"-->
      <!--class="cell"-->
      <!--&gt;-->
      <!--&lt;!&ndash;<single-good :good="good" region="normal"></single-good>&ndash;&gt;-->
      <!--<div class="item" :class="key===0 ? cheki:chekn" @click="toDetail(good.id,'normal')">-->
      <!--<div class="item-l">-->
      <!--<img :src="good.pic" alt="">-->
      <!--</div>-->
      <!--<div class="item-r">-->
      <!--<p class="p1 line16" style="font-weight: bold">{{good.name}}</p>-->
      <!--<p class="p2 line14">产品卖点产品卖点</p>-->
      <!--<p class="p3 line18" style="font-weight: bold">爱就购买绝对划算</p>-->
      <!--<div class="line-fi"></div>-->
      <!--<div class="item-lin">-->
      <!--<img src="../../assets/img/item_d.jpg" alt="">-->
      <!--<span>销售卖点</span>-->
      <!--<img src="../../assets/img/item_d.jpg" alt="">-->
      <!--<span>销售卖点</span>-->
      <!--<img src="../../assets/img/item_d.jpg" alt="">-->
      <!--<span>销售卖点</span>-->
      <!--</div>-->
      <!--<div class="item-tt">-->
      <!--<div class="tt-l">-->
      <!--<p class="p4">薪年价:</p>-->
      <!--<p class="p5" style="font-weight: bold">满减后</p>-->
      <!--</div>-->
      <!--<p class="p6" style="font-weight: bold">{{good.price}}</p>-->
      <!--<div class="tt-r">-->
      <!--<div class="tt-rt">立即抢购</div>-->
      <!--<p class="p4" style="text-decoration:line-through">原价:{{good.line}}</p>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</van-cell>-->
      <!--</van-list>-->
      <!--<p v-if="finished" class="no-more">敬请期待更多产品</p>-->
    </div>
  </div>
</template>
<div>
</div>
<script>
  import Banner from '../../components/sale/banner.vue';
  import tabBar from '../../components/common/tabBar';

  export default {
    /**
     * 测试首页
     */
    name: 'front',
    components: {
      Banner,
      tabBar
    },
    data() {
      return {
        banner: [],
        loading: false,
        finished: false,
        goodAll: [], // 分区商品
        goodsAll: [], // 全部商品
        page: 0,
        category: [],
        dataGood: [], // 组装后的个人类商品数据
        state: true,
        cheki: 'chekii',
        chekn: 'cheknn',
        dataTop: [], // 商品横排两个
        dataTopR: [] // 商品竖排两个
      };
    },
    created() {
      this.onLoad();
    },
    methods: {
      compareVal(value) {
        // 按权重排序
        value.sort(function compare(obj1, obj2) {
          let val1 = parseInt(obj1.weight);
          let val2 = parseInt(obj2.weight);
          if (val1 < val2) {
            return -1;
          } else if (val1 > val2) {
            return 1;
          } else {
            return 0;
          }
        });
      },
      scrollTop() {
        //  返回顶部
        let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
        if (currentScroll > 0) {
          window.requestAnimationFrame(this.scrollTop);
          window.scrollTo(0, currentScroll - (currentScroll / 5));
        }
      },
      onLoad() {
        let that = this;
        if (this.finished === false) {
          // 异步更新数据
          setTimeout(() => {
            let all = {
              page: that.page,
              size: 8,
              type: 'simple'
            };
            that.$Sale.getAllGoods(all).then(res => {
              this.page++;
              that.goodsAll = that.goodsAll.concat(res.data);
              if (this.dataTop.length === 0) {
                this.dataTop = this.goodsAll.slice(0, 2);
              }
              if (this.dataTopR.length === 0) {
                this.dataTopR = this.goodsAll.slice(3, 5);
              }
              if (res.data.length === 0) {
                that.finished = true;
              }
              this.loading = false;
              this.state = false;
              this.asseModel();
            }, () => {
            });
          }, 500);
        }
      },
      asseModel() {
        // 组装数据
        for (let key in this.category) {
          let good = [];
          console.log('asdasdsad');
          for (let key2 in this.category[key].product) {
            console.log('2222222222');
            // good[val] = this.goodsAll.filter(item => item.id === val);
            good[key2] = this.goodsAll.filter(item =>
              item.id === this.category[key].product[key2]
            );
          }
          this.dataGood[key] = {name: this.category[key].name, good: good};
          console.log(this.dataGood, 'dataGood');
        }
      },
      toDetail(id, region) {
        // 跳转详情页面
        this.$store.commit('region', region);
        this.$router.push(
          {
            name: 'good-detail',
            query: {
              id: id,
              region: this.region
            }
          });
      }
    },
    mounted() {
      // 获取轮播图，分区，分类数据
      this.$Sale.getAllList().then(res => {
        this.banner = res.data.slider;
        this.nav = res.data.nav;
        this.category = res.data.category; // 分区产品标题和产品id
        this.compareVal(this.nav);
        this.goodAll = res.data.region;
        this.compareVal(this.goodAll);
      }, () => {
      });
    }
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl";
  .fron {
    min-height 100vh
    background main-color

    .new-m {
      width 100vw
      height 64vw
      flex-y()

      .new-t {
        flex-x(, stretch)
        padding 0 2vw
        height 53vw
        width 100%
        box-sizing border-box

        .item-l {
          width 24vw
          height 49vw
          background white
          flex-y(space-between, center)
          padding 2vw 0

          .p1 {
            word-vw(10, #707070)
            text-align center
          }

          .p2 {
            word-vw(10, #797979)
            line-height 1.6
          }

          .btn {
            width 90%
            padding 1vw
            background #f7e13c
            word-vw(10, #272727)

            span {
              word-vw(10, #272727)
            }
          }

          img {
            width 100%
          }
        }

        .item-r {
          flex-y(space-between)

          .item-rr {
            background #3c4ec2
            width 44vw
            height 25.5vw
            flex-x()
            padding-left 2vw
            box-sizing border-box

            .le {
              flex-y(flex-start, flex-start)
              height 22vw
              position relative

              .p1 {
                word-vw(10, #fff)
                line-height 1.3
              }

              .ste {
                margin-top 3vw
              }

              .p2 {
                word-vw(8, #b1bdfd)
                line-height 1.3
              }

              .btn {
                width 25vw
                padding 1vw
                position absolute
                background #f7e13c
                bottom 0
                word-vw(10, #272727)

                span {
                  word-vw(10, #272727)
                }
              }
            }

            img {
              width 50%
              height auto
            }
          }
        }
      }
    }

    .man {
      /*min-height 100vh*/

      .chekii {
        /*background url("../../assets/img/bit.png") no-repeat*/
        background url("http://yqs1.oss-cn-huhehaote.aliyuncs.com/local/bit.png") no-repeat
      }

      .cheknn {
        background url("http://yqs1.oss-cn-huhehaote.aliyuncs.com/local/bno.png") no-repeat
      }

      .item {
        /*background url("../../assets/img/bit.png") no-repeat*/
        background-size 100%
        width 100%
        height 54vw
        flex-x(space-between, stretch)
        padding 4vw 4vw 0
        box-sizing border-box

        .item-l {
          flex-x(center)
          padding-left 2vw

          img {
            width 100%
          }
        }

        .item-r {
          flex 1
          padding 6vw 2vw 0 0
          flex-y(flex-start, flex-end)

          .line-fi {
            width 70%
            height 1px
            background #000
          }

          .item-lin {
            flex-x(space-between)
            width 80%

            img {
              width 3vw
            }

            span {
              word-vw(8, #000)
              flex 1
            }
          }

          .item-tt {
            flex-x(flex-start, center)
            margin-top 3vw

            .tt-l {
              flex-y(, flex-end)
            }

            .tt-r {
              flex-y(space-between)
              height 6vw

              .tt-rt {
                background gray6
                padding 1vw 2vw
                word-vw(6, #fff)
                line-height 1
              }
            }
          }
        }
      }

      .nav {
        flex-x(center)
        height 10vw

        p {
          padding 0 3vw
        }
      }

      .list {
        flex-x(flex-start)
        flex-flow row wrap
        padding 3vw 1vw

        .list-it {
          width 47vw
          height 70vw
          margin 0 1vw
          background url("../../assets/img/item2.png") no-repeat
          background-size contain
          flex-y()

          img {
            width 36vw
            height 36vw
          }

          .list-tt {
            margin-top 2vw
            flex-y()

            .line-1 {
              height 1px
            }

            p {
              line-height 6vw
            }
          }

          .item-tt {
            flex-x(flex-start, center)
            height 10vw

            .tt-l {
              flex-y(, flex-end)
              height 6vw
            }

            .tt-r {
              flex-y(space-between)
              height 6vw

              .tt-rt {
                background gray6
                padding 1vw 2vw
                word-vw(6, #fff)
              }
            }
          }
        }
      }
    }

    .van-cell >>> {
      padding 0
    }

    .van-cell >>> {
      background none
    }

    .demo {
      width 100%
    }
  }
</style>
